<template>
    <view>
		 <view class="article-meta">
            <text class="article-author">新闻</text>
            <!-- <text class="article-text" style="margin-top: 15rpx; margin-left: 15rpx;">发表于</text> -->
            <text class="article-time" >{{time}}</text>
        </view>
        <view class="banner">
            <image class="banner-img" :src="banner.cover"></image>
            <view class="banner-title">{{banner.title}}</view>
        </view>
		<view class="box">
			<div class="frame">
					{{'&nbsp;&nbsp;'+banner.author_name}}
			</div>
		</view>
       
    </view>
</template>
<script>
    export default {
        data() {
            return {
				// id:''
				banner:"",
				time:''
			}
        },
		onLoad:function(option) {
		    
			    this.banner = JSON.parse(decodeURIComponent(option.detailDate));
			    //详情标题
				console.log(this.banner)
				//修改一下展示时间样式
				const times = this.banner.published_at
				this.time = times.substring(0,times.length-8)
				console.log(this.time);
				
			    uni.setNavigationBarTitle({
			        title: this.banner.title
			    });
		},

        methods: {
        }
    }
</script>
<style>
    .banner {
		padding: 20px;
        height: 360upx;
		width: 100%;
        overflow: hidden;
        position: relative;
        background-color: white;
    }
    .banner-img {
        width: 100%;
		border-radius: 5px 5px 5px 5px ;
    }
    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 45upx;
        bottom: 30upx;
        width: 90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }
	.article-author{
		font-size: 20px;
		color: deepskyblue;
		font-weight: 600;
	}
	.article-meta{
		line-height: 40px;
		margin-left: 25px;
	}
	.article-time{
		float: right;
		margin-right: 5%;
		margin-top: 5%;
	}
	.frame{
		width: 90%;
		height: 470px;
		/* border: 1px solid; */
		margin: auto;
		position: absolute;
		top: 50px;
		letter-spacing: 3px;
	}
	.box{
		position: relative;
		left: 20px;
	}
</style>